<template>
  <el-menu
    router
    default-active="files"
    class="border-0 el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
  >
    <template v-for="item in menus" :key="item.index">
      <template v-if="item.children">
        <el-sub-menu v-permission="item.permission" :index="item.index">
          <template #title>
            <component :is="item.icon" width="18"></component>
            <span class="ml-1">{{ item.name }}</span>
          </template>
          <template v-if="item.children.length">
            <el-menu-item
              v-for="child in item.children"
              :key="child.index"
              v-permission="child.permission"
              :index="child.index"
              >{{ child.name }}</el-menu-item
            >
            <!-- v-permission="child.permission" -->
          </template>
        </el-sub-menu>
      </template>
      <template v-else>
        <el-menu-item v-permission="item.permission" :index="item.index">
          <template #title>
            <component :is="item.icon" width="18"></component>
            <span class="ml-1">{{ item.name }}</span>
          </template>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>
<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { menu } from '__M/menu';

  const menus = reactive(menu);
  const isCollapse = ref(false);

  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
  };
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
  };
</script>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    height: 100%;
  }
</style>
